<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>客户管理</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">
<div class="layui-body" style="padding:15px;">

    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/system.css"/>
    <div class="sp-wrapper">
        <div class="sp-title"><span>地址管理</span></div>
        <div class="data-info">
            <span th:text="${'名称：'+lists.name}" style="margin-right: 20px">客户名称：张三</span>
            <span th:text="${'手机：'+lists.contact}" style="margin-right: 50px">客户手机：15999998888</span>
            <button type="button" id="add" class="layui-btn layui-btn-primary">新增收货地址</button>
        </div>
        <div class="address-list">
            <ul>
                <li >
                    <div class="layui-card">

                        <div class="layui-card-body">
                            <p class="status"><input type="hidden" id="userId" th:value="${lists.id}">
                                <i class="default">默认地址</i>
                            </p>
                            <p><span>收货人：</span><b th:text="${lists.name}">袁润</b></p>
                            <p><span>手机号码：</span><b th:if="${lists.contact}!=null" th:text="${lists.contact}">15999600065</b></p>
                            <p><span>收货地址：</span><b th:if="${lists.address}!=null" th:text="${lists.address}">广东省深圳市南山区大冲商务中心D座</b></p>
                            <p class="todo" style="color: blue"><i class="edit" th:attr="data-id=${lists.id}">修改</i>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
            <ul></ul>
            <ul>
                <li th:each="list:${lists.addressList}">
                    <div class="layui-card">

                        <div class="layui-card-body">
                            <p><span>收货人：</span><b th:text="${list.consignee}">袁润</b></p>
                            <p><span>手机号码：</span><b th:text="${list.mobile}">15999600065</b></p>
                            <p><span>收货地址：</span><b th:text="${list.address}">广东省深圳市南山区大冲商务中心D座</b></p>
                            <p class="todo" style="color: blue"><i class="edit2" th:attr="data-id=${list.id}" style="margin-right: 30px;">修改</i><i class="delete"
                                                                                                  th:attr="data-id=${list.id}">删除</i>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div> <!-- end hy-main -->
    <script type="text/template" id="tpl">
        <div class="address-box">
            <form  class="layui-form" action="/manage/address_edit" method="post" id="edit_form">
                <input type="hidden" name="userId" th:value="${lists.id}">
                <input type="hidden" name="addressId" id="address_id"/>
                <input type="hidden" name="type" id="type"/>
                <div class="address-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所在地区</label>
                        <div class="layui-input-block">
                            <input type="text" name="area" placeholder="请选择地区" readonly="readonly" id="address"/>
                            <input type="hidden" name="areaCode" id="code">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">收货人姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="consignee" placeholder="请填写收货人姓名" id="name"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号码</label>
                        <div class="layui-input-block">
                            <input type="text" name="mobile" placeholder="请填写收货人手机号" id="phone"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">详细地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" placeholder="请填写详细地址" id="address2"/>
                        </div>
                    </div>

                    <div class="a-tips"></div>
                </div>
            </form>
        </div>
    </script>
    <script type="text/javascript" src="/js/address/Address.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var ad = null;
            var initAddress = function () {
                var $address = $('#address');
                var $code = $('#code');
                ad = new Address({
                    url: '/ajax_manage/address_data',
                    input: $address[0],
                    select: function (address, code) {
                        $address.val(address.join(' '));
                        $code.val(code.join(' '));
                    }
                });
                ad.initArea($address.val(), $code.val());
            };

            // 新增
            $('#add').click(function (e) {
                e.stopPropagation();
                Tips.alert({
                    title: '新增子收货收货地址',
                    content: $('#tpl').html(),
                    render: function () {
                        initAddress();
                    },
                    close: function () {
                        ad.hide();
                    },
                    before: function () {
                        // ..
                        $('#edit_form').submit();
                    }
                });
            });
            // 修改
            $('.address-list').delegate('.edit', 'click', function (e) {
                e.stopPropagation();
                var id = $(this).attr('data-id');
                // .. ajax
                $.ajax({
                    url: "/ajax_manage/address_edit_id",
                    type: "POST",
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(id),
                    success: function (res) {
                        if (res.code == 0) {
                            Tips.alert({
                                title: '修改收货地址',
                                content: $('#tpl').html(),
                                render: function () {
                                    $('#address').val(res.data.province + ' ' + res.data.city + ' ' + res.data.county);
                                    $('#name').val(res.data.name);
                                    $('#phone').val(res.data.contact);
                                    $('#address2').val(res.data.address);
                                    $('#type').val(1);
                                    initAddress();
                                },
                                close: function () {
                                    ad.hide();
                                },
                                before: function () {
                                    $('#edit_form').submit();
                                }
                            });
                        }
                    }
                });
            });
            $('.address-list').delegate('.edit2', 'click', function (e) {
                e.stopPropagation();
                var id = $(this).attr('data-id');
                // .. ajax
                $.ajax({
                    url: "/ajax_manage/address_edit_id2",
                    type: "POST",
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(id),
                    success: function (res) {
                        if (res.code == 0) {
                            Tips.alert({
                                title: '修改收货地址',
                                content: $('#tpl').html(),
                                render: function () {
                                    $('#address').val(res.data.provinceName + ' ' + res.data.cityName + ' ' + res.data.districtName);
                                    $('#name').val(res.data.consignee);
                                    $('#phone').val(res.data.mobile);
                                    $('#address2').val(res.data.address);
                                    initAddress();
                                },
                                close: function () {
                                    ad.hide();
                                },
                                before: function () {
                                    $('#address_id').val(res.data.id);
                                    $('#edit_form').submit();
                                }
                            });
                        }
                    }
                });
            });

            // 删除
            $('.address-list').delegate('.delete', 'click', function (e) {
                e.stopPropagation();
                var data =  $(this).attr('data-id');
                Tips.alert({
                    title: '删除地址',
                    content: '确定要删除吗？',
                    define: function () {
                        $.ajax({
                            url: '/ajax_manage/address_delete',
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (data) {
                                if (data.code == 0) {
                                    Tips.close();
                                    location.reload(true);
                                } else {
                                    alert(data.msg);
                                }
                            }
                        });
                    }
                });
            });
        });
    </script>
</div>
</body>
</html>
